<template>
    <div>
        <el-card ref="card" :style="style" class="box-card">
            <el-input
                v-model="filterText"
                placeholder="输入关键字进行过滤">
            </el-input>

            <el-tree
                ref="tree"
                :data="data"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :highlight-current=true
                :props="defaultProps"
                class="filter-tree"
                default-expand-all
                @node-click="nodeClick">
            </el-tree>
        </el-card>
    </div>
</template>

<script>

import {treeSelect} from '@/api/system/sysOrg'

export default {
    name: "SysOrgTree",
    data () {
        return {
            filterText: '',
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            // body高度
            bodyHeight: document.body.clientHeight,
            style: {
                'overflow-y': 'auto',
                height: '800px'
            }
        }
    },
    watch: {
        filterText (val) {
            this.$refs.tree.filter(val)
        },
        bodyHeight (newVal, oldVal) {
            this.style = {
                'overflow-y': 'auto',
                height: newVal + 'px'
            }
        }
    },
    mounted () {
        console.log('bodyHeight', this.bodyHeight)
        this.bodyHeight = document.body.clientHeight - 150
        this.getListOrg()
    },
    methods: {
        /** 查询机构列表 */
        getListOrg () {
            treeSelect({'delFlag': '0', 'status': '0'}).then(res => {
                this.data = res.data
                this.$emit('listOrgTree', res.data)
            })
        },
        filterNode (value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        nodeClick (a, b, c) {
            this.$emit('treeClick', a)
        }
    },
}
</script>

<style scoped>
.box-card {
    overflow-y: auto
}
</style>
